<template>
  <div class="search">
    <f-form ref="form" :action="api.slider" :form-key="this.formItem.sliderId" :file-ids="fileIds">
      <f-form-item label="发布类型" name="sliderType" type="radio" data-type="number" v-if="loaded" :required="true" :radioButton="true" :data="api.slider.sliderType" :value="formItem.sliderType"/>
      <f-form-item label="标题" name="sliderTitle" :required="true" :value="formItem.sliderTitle"/>
      <f-form-item label="跳转方式" name="jumpType" type="radio" v-if="loaded"  :data="api.slider.jumpType" :value.sync="formItem.jumpType"/>
      <f-form-item label="内容" name="content" type="editor" :value="formItem.content" v-show="formItem.jumpType==3"/>
      <f-form-item label="跳转地址" name="linkUrl" :value="formItem.linkUrl" v-show="formItem.jumpType==1"/>
      <f-form-item label="排序值" type="number" :required="true" name="sortOrder" :value="formItem.sortOrder"/>
      <f-form-item label="轮播图" type="upload" name="sliderImg" :value="formItem.sliderImg" :file-max="1" @uploadSuccess="uploadSuccess"/>
    </f-form>
  </div>
</template>
<script>
  import api from './js/api'

  export default {
    name: 'sliderForm',
    props: {},
    data() {
      return {
        api: api,
        isAdd: true,//是否是添加模式
        loaded: false,//是否加载轮播图组件
        fileIds: [],//上传文件ID
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          sliderId: '',
          sliderTitle: '',
          content: '',
          sliderType: 1,
          jumpType: 3,
          sliderImg: '',
          sortOrder: 99
        }
      },
      //表单赋值
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        if (data && data.sliderId) {
          this.formItem = data
          this.isAdd = false
          this.loaded = true
        } else {
          this.loaded = true
        }
      },
      //文件上传回调
      uploadSuccess(fileUrl, files, fileIds, removeIds) {
        this.fileIds = fileIds
      },
      //提交表单
      handleSubmit(callback) {
        this.$refs.form.submit({ sliderImg: this.formItem.sliderImg, content: this.formItem.content }, callback)
      }
    },
    created() {
    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
